<template>
	<div id="errorRecovery">
		<el-dialog :visible.sync="dialogVisible" :show-close="false">
			<h2>纠错</h2>
			<div class="type">
				<i class="iconfont icon-x_datixuanxiang close" @click="cancel" />
				<div class="tit">问题反馈类型</div>
				<div class="check" v-for="(item, index) in list" :key="index" @click="typeClick(item)" :class="[type == item.type ? 'active' : '']">
					<i v-show="type == item.type" class="iconfont icon-_datixuanxiang" />
					{{ item.name }}
				</div>
			</div>
			<el-input class="textarea" type="textarea" resize="none" v-model="content" placeholder="请输入您的意见或建议~"></el-input>
			<div class="phon">
				<div class="phon_tit">联系方式</div>
				<el-input v-model="contact" placeholder="留下联系方式，更能快速解决问题~~"></el-input>
			</div>
			<div class="errWarn" v-if="errorWarn">请输入您的意见内容~</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="submit">提 交</el-button>
				<el-button @click="cancel">取消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'errorRecovery',
	data() {
		return {
			list: [{ name: '题目内容', type: 4 }, { name: '答案解析', type: 5 }, { name: '其他错误', type: 6 }],
			type: 4, //类型
			content: '', //内容
			contact: '', //联系方式
			errorWarn: false
		};
	},
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		//切换类型
		typeClick(val) {
			this.type = val.type;
		},
		//取消按钮
		cancel() {
			this.$emit('cancel');
			this.errorWarn = false;
			this.content = '';
			this.contact = '';
			this.type = 4;
		},
		//提交按钮
		submit() {
			if (this.content) {
				this.$emit('submit', { type: this.type, content: this.content, contact: this.contact });
				this.errorWarn = false;
				this.content = '';
				this.contact = '';
				this.type = 4;
			} else {
				this.errorWarn = true;
			}
		}
	}
};
</script>
<style scoped>
/deep/.el-dialog {
	position: relative;
	width: 712px;
	height: 490px;
	background: #ffffff;
	border-radius: 20px;
	padding: 51px 84px 60px 53px;
}
/deep/.el-dialog__header {
	padding: 0;
}
/deep/.el-dialog__body {
	padding: 0;
	font-size: 16px;
}
/deep/.el-textarea__inner {
	height: 100px;
	font-size: 16px;
	border-radius: 6px;
	font-family: 'sy';
}
/deep/.el-input__inner {
	font-size: 16px;
	border-radius: 6px;
	font-family: 'sy';
}
/deep/.el-dialog__footer {
	text-align: left;
	margin-left: 117px;
	margin-top: 20px;
}
.errWarn {
	padding-left: 117px;
	color: #dd6161;
}
.close {
	position: absolute;
	top: 28px;
	right: 28px;
	color: #c4c6cc;
}
h2 {
	font-size: 22px;
	color: #363940;
	font-weight: 400;
	text-align: center;
}
.type {
	margin-top: 52px;
	display: flex;
}
.tit {
	font-size: 16px;
	width: 100px;
	line-height: 38px;
	color: #475166;
	margin-right: 18px;
}
.check {
	height: 38px;
	width: 136px;
	border: 1px solid #f8f8f8;
	background: #f8f8f8;
	border-radius: 19px;
	margin-right: 28px;
	text-align: center;
	line-height: 38px;
	font-size: 16px;
	color: #636874;
}
.check:last-child {
	margin-right: 0;
}
.active {
	font-weight: 500;
	color: #f45c4b;
	background: #fff6f5;
	border: 1px solid #f45c4b;
	border-radius: 19px;
}
.iconfont {
	font-size: 12px;
	margin-right: 7px;
}
.textarea {
	margin-left: 117px;
	margin-top: 23px;
	width: 459px;
	height: 100px;
	color: #c4c6cc;
	font-size: 16px;
}
.phon {
	display: flex;
	margin-top: 30px;
	line-height: 41px;
}
.phon_tit {
	margin-left: 28px;
}
/deep/.phon .el-input {
	width: 459px;
	margin-left: 24px;
}
/deep/.phon .el-input__inner {
	width: 100%;
	height: 40px;
	border-radius: 4px;
}

/deep/.el-button {
	width: 86px;
	height: 42px;
}
/deep/.el-button + .el-button {
	margin-left: 20px;
}
</style>
